<template>
  <el-card class="home__card-item home__ranking">
    <div slot="header" class="home__card-title clearfix">
      <h3>销售排行</h3>
      <tabs v-model="currentMonth" :tabs="months" size="mini" />
      <el-date-picker
        v-model="month"
        type="month"
        placeholder="选择月">
      </el-date-picker>
    </div>

    <div class="home__card-content">
      <!-- 汇总 -->
      <div class="home__ranking-sum">
        <div class="home__ranking-sum__item" v-show="currentTab != 'customer'">
          <label>{{this.summary.totalAmountText}}</label>
          <span>{{this.summary.totalAmount}}</span>
        </div>
        <div class="home__ranking-sum__item">
          <label>{{this.summary.totalText}}</label>
          <span>{{this.summary.total}}</span>
        </div>
      </div>

      <!-- 详情 -->
      <div class="home__ranking-wrap">
        <tabs v-model="currentTab" :tabs="tabs" @chnage="changeTab" />
        <!-- 客户 -->
        <div class="home__ranking__content">
          <div class="home__ranking__echart-wrap">
            <h4>金额排行</h4>
            <div ref="bar" class="home__ranking__echart"></div>
          </div>
          <div class="home__ranking__echart-wrap">
            <h4>数量排行</h4>
            <div ref="bar2" class="home__ranking__echart"></div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
import Tabs from "./tabs.vue";
import moment from 'moment';
import { saleRank } from '@/api/report/report'
import {
  GetPreMonthDay,
    getBeginAndEndTime
} from '@/utils/dateUtils'
export default {
  data() {
    return {
      createTime: '',
      month:'',
      summary: {},
      pickerOptions: {
        shortcuts: []
      },
      currentTab: "customer",
      tabs: [
        { name: "客户", value: "customer" },
        { name: "合同", value: "contract" },
        { name: "订单", value: "order" },
        { name: "首开票", value: "firstInvoicing" },
        { name: "开票", value: "invoicing" },
        { name: "收款", value: "shipment" },
        { name: "回款", value: "receivedPayments" },
      ],
      currentMonth: "this",
      months: [
        { name: "上月", value: "last" },
        { name: "本月", value: "this" },
      ],
      instances: {},
      sumChartData: [],
      amountChartData: [],
    };
  },

  components: {
    Tabs,
  },
  watch: {
    currentMonth() {
      if (this.currentMonth === 'this') {
        this.month = this.parseTime(new Date());
      } else if (this.currentMonth === 'last') {
        this.month = GetPreMonthDay(this.parseTime(new Date()), 1)
      }
    },
    month() {
      this.saleRank(this.currentTab)
    }
  },

  created() {
    this.month = this.parseTime(new Date())
    this.saleRank(this.currentTab)
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleResize);
    });
    this.setOptions();
  },
  methods: {
    saleRank(type){
      var queryParams = {
        createTime: getBeginAndEndTime(this.month)
      }
      console.log(queryParams)
      saleRank(type, queryParams).then((response) => {
        this.summary = response.data.summary
        this.sumChartData = response.data.sumChartList
        this.amountChartData = response.data.amountChartList
        this.setOptions()
      })
    },
    currentChange() {

    },
    getTableData() {

    },
    changeTab() {
        this.setOptions();
    },
    setOptions() {
      this.$nextTick(() => {
        // 金额
        this.instances.bar = echarts.init(this.$refs.bar);
        this.instances.bar.setOption({
          grid: {
            left: 40,
            top: 30,
            bottom: 40,
            right: 30
          },
          xAxis: {
            type: 'value',
          },
          yAxis: {
            type: 'category',
            data: this.amountChartData.map(e => e.dayOfMonth)
          },
          series: [
            {
              data: this.amountChartData.map(e => e.amount),
              type: 'bar'
            }
          ]
        });
        // 数量
        this.instances.bar = echarts.init(this.$refs.bar2);
        this.instances.bar.setOption({
          grid: {
            left: 40,
            top: 30,
            bottom: 40,
            right: 30
          },
          xAxis: {
            type: 'value',
          },
          yAxis: {
            type: 'category',
            data: this.sumChartData.map(e => e.dayOfMonth)
          },
          series: [
            {
              data: this.sumChartData.map(e => e.amount),
              type: 'bar'
            }
          ]
        });
      })
    },
    handleResize() {
      Object.keys(this.instances).forEach(key => {
        this.instances[key]?.resize?.();
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.home__ranking {
  .home__card-content {
    display: flex;
    .home__ranking-sum {
      min-width: 160px;
      border-right: 1px solid #EBEEF5;
      .home__ranking-sum__item {
        padding: 20px;
        font-size: 24px;
        & > label {
          display: block;
          font-size: 12px;
          margin-bottom: 10px;
        }
      }
    }
    .home__ranking-wrap {
      flex: 1;
      text-align: center;
      padding: 0 20px 20px;
      .home__ranking__content {
        margin: 20px 0;
        display: flex;
        .home__ranking__echart-wrap {
          flex: 1;
          margin-right: 30px;
          height: 100%;
          h4 {
            font-size: 14px;
          }
          .home__ranking__echart {
            width: 100%;
            height: 160px;
          }
        }
      }
    }
  }
}
</style>
